<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <script src="/static/bootstrap/popper.min.js"></script>
    <script src="/static/bootstrap/bootstrap.min.js"></script>
    <script src="/static/js/page.min.js"></script>
    <script src="/static/js/message/message.js"></script>
    <script src="/static/js/vue/vue.min.js"></script>
    <script src="/static/js/axios/axios.min.js"></script>

</head>
<body>
<div id="app">
    <form action="/login/hello" enctype="multipart/form-data" method="post">
        <!--<form action="/test/hello" enctype="multipart/form-data" method="post">-->
        id: <input type="text" name="id">
        psw: <input type="text" name="psw">
        <input type="submit">

        <input type="button" id="btn1" value="ajax获取json数据">

        <input type="button" id="btn2" value="axios获取json数据(GET)">

        <input type="button" id="btn3" value="axios获取json数据(POST)">

        <input type="button" v-on:click="initData" value="vue-axios获取json数据(POST)">
        <input type="button" v-on:click="initTest" value="vue-axios获取json数据(POST)">


        <p id="json"></p>
    </form>
</div>

<script th:inline="javascript">

    let vm = new Vue({
        el : '#app',
        data : {
            msg : '张三',
            name : '李四',
            num : 0
        },
        methods : {
            initData(){
                axios({
                    method : "POST",
                    url:"/user/json/",
                    headers:{
                        'Content-type': 'application/json;charset=UTF-8'
                    },
                }).then(function(response){
                    console.log(response.data);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            initTest(){
                axios({
                    method : "POST",
                    url:"/user/json/",
                }).then(function(response){
                    console.log(response.data);
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        beforeMount (){
            console.log("页面挂载之前")
        },
        mounted(){
            console.log("页面挂载之后")
            this.initData()
        },
    });

    $(function () {
        $("#btn1").click(function(){
            $.ajax({
                type:"POST",
                url:"/user/json/",
                dataType:"json",
                contentType:'application/json;charset=UTF-8',
                success: function(data) {
                    console.log(data);
                },
                error:function(){
                    alert("error.");
                }
            });
        });

        $("#btn2").click(function(){
            axios({
                method : "GET",
                url:"/user/json/",
                params:{
                    id : '2018108020',
                    psw : 123
                },
                headers:{
                    'Content-type': 'application/json;charset=UTF-8'
                },
                responseType: 'json'
            }).then(function(response){
                console.group()
                console.log(response.data);
                console.log(response.headers)
                console.groupEnd()
   /*             console.log(response.status);
                console.log(response.statusText);
                console.log(response.config);*/

            }).catch(function (error) {
                console.log(error);
            });
        });

        $("#btn3").click(function(){
            axios({
                method : "POST",
                url:"/user/json/",
                headers:{
                    'Content-type': 'application/json;charset=UTF-8'
                },
                params : ({
                    id : '2018108020',
                    psw : 123
                }),
            }).then(function(response){
                console.group()
                console.log(response.data);
                console.log(response.headers)
                console.groupEnd()
            }).catch(function (error) {
                console.log(error);
            });
        });


    })

</script>
</body>
</html>